<!--
 * @Author: zhangfeng
 * @Date: 2023-12-27 11:20:45
 * @LastEditTime: 2024-01-12 18:31:52
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\user\UserPage.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<el-button @click="userDialogRef.addUsers()" class="button" type="primary"
					>添加角色</el-button
				>
			</div>
		</template>
		<el-table
			v-loading="loading"
			:data="userTableData"
			row-key="id"
			border
			style="width: 100%"
		>
			<el-table-column type="index" label="序号" width="80" align="center" />
			<el-table-column prop="user_name" label="用户名" />
			<el-table-column prop="roleName" label="角色" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						@click="userDialogRef.editUsers(scope.row)"
						link
						type="primary"
						size="small"
						>修改</el-button
					>
					<el-button
						@click="
							async () => {
								if (successOrError) {
									await successOrError(
										(await deleteUsers(scope.row.id)) as AxiosResponse<ResponseData>
									);
									await getAllUsers();
								}
							}
						"
						link
						type="primary"
						size="small"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<UserDialog ref="userDialogRef" @getlist="getAllUsers()" />
</template>

<script setup lang="ts">
import { useUsers } from '../../composables/useUsers';
import { globalInjectSymbol } from '../../utils/symbolKey';
import UserDialog from './module/UserDialog.vue';
const { loading, userTableData, getAllUsers, deleteUsers } = useUsers();

const { successOrError } = inject(globalInjectSymbol) || {};
const userDialogRef = ref();
getAllUsers();
</script>

<style scoped></style>
